<template>
  <div style="width: 100%; height: 100%">
    <div class="flex-row-start-start">
      <RadioGroup v-model="selTab" type="button" size="large">
        <Radio label="检测事件"> </Radio>
        <Radio label="检测点"> </Radio>
        <Radio label="注入事件"></Radio>
        <Radio label="注入点"></Radio>
      </RadioGroup>
    </div>
    <div style="margin-top: 27px">
      <div v-if="selTab == '检测事件'">
        <jc-event
          :jcEventList="jcEventList"
          :totalLen="totalLen"
          @switch-to-add="changeJcEventInfo"
          v-if="showJcEvent"
          @update-jcEvent="togetDMJcEvent"
          @change-to-page="changePage"
        ></jc-event>
        <add-jc-event
          :jcEventList="jcEventList"
          v-if="!showJcEvent"
        ></add-jc-event>
      </div>
      <div v-if="selTab == '检测点'">
        <jcd-info
          :totalLen="totalLen"
          :jcdInfoList="jcdInfoList"
          @switch-to-add="changeJcdInfo"
          v-if="showJcdInfo"
          @update-jcdInfo="togetDMkqJcdInfo"
          @change-to-page="changePage"
        ></jcd-info>
        <add-jcd-info
          :jcdInfoList="jcdInfoList"
          v-if="!showJcdInfo"
        ></add-jcd-info>
      </div>
      <div v-if="selTab == '注入事件'">
        <zrd-event-info
          :totalLen="totalLen"
          :zrEventList="zrEventList"
          @switch-to-add="changeZrEvent"
          v-if="showZrEvent"
          @update-jzInfo="togetDMkqJzInfo"
          @change-to-page="changePage"
        ></zrd-event-info>
        <add-jz-info :jzInfoList="zrEventList" v-if="!showZrEvent"></add-jz-info>
      </div>
      <div v-if="selTab == '注入点'">
        <zrd-info
          :totalLen="totalLen"
          :kqInfoList="zrdList"
          @switch-to-add="changeKqInfo"
          v-if="showKqInfo"
          @update-kqInfo="togetDMKqInfo"
          @change-to-page="changePage"
        ></zrd-info>
        <add-kq-info :kqInfoList="zrdList" v-if="!showKqInfo"></add-kq-info>
      </div>
    </div>
    <div
      class="flex-row-center-end"
      style="color: #ffffff; height: 58.4px; margin-top: 40px"
    >
      <div class="flex-row-start-center">
        <div v-if="!showAll">
          <router-link
            :to="{
              name: queryParam,
              query: {
                selKq: selKq,
                showJz: showJz,
                curJz: curJz,
                selTab: queryTab,
                selType: queryType,
              },
            }"
          >
            <div class="button-style">返回上级</div>
          </router-link>
        </div>
        <div v-else>
          <div class="button-style" @click="backPre">返回上级</div>
        </div>
        <router-link :to="{ name: 'index' }">
          <div class="button-style" style="margin-left: 14px">返回主页面</div>
        </router-link>
        <div class="date-style">{{ systemTime }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import jcdInfo from "@/components/dataMananger/jcdInfo";
import jcEvent from "@/components/dataMananger/jcEvent";
import zrdEventInfo from "@/components/dataMananger/zrEvent.vue";
import zrdInfo from "@/components/dataMananger/zrdInfo.vue";
import addKqInfo from "@/components/addData/kqInfo";
import addJzInfo from "@/components/addData/jzInfo";
import addJcEvent from "@/components/addData/jcEvent";
import addJcdInfo from "@/components/addData/jcdInfo";
export default {
  data() {
    return {
      selTab: "检测事件",
      queryParam: "",
      selKq: "",
      showJz: false,
      curJz: "",
      zrdList: [],
      jcEventList: [],
      jcdInfoList: [],
      zrEventList: [],
      showKqInfo: true,
      showZrEvent: true,
      showJcdInfo: true,
      showJcEvent: true,
      queryTab: "库区概览",
      queryType: "",
      selType: "",
      page: 0,
      pageSize: 10,
      totalLen: 0,
      showAll: false,
    };
  },
  computed: {
    systemTime() {
      return this.$store.state.systemTime;
    },
  },
  components: {
    jcdInfo,
    jcEvent,
    zrdEventInfo,
    zrdInfo,
    addKqInfo,
    addJcEvent,
    addJcdInfo,
    addJzInfo,
  },
  watch: {
    selTab(val) {
      let o = {};
      this.page = 0;
      if (val == "注入点") {
        o.kqId = "";
        o.kqName = "";
        o.kqState = "";
        o.kqArea = "";
        o.startTime = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        this.getDMKqInfo(o);
      } else if (val == "检测事件") {
        o.jcEventId = "";
        o.kqName = "";
        o.jzId = "";
        o.jzName = "";
        o.jcType = "";
        o.jcdId = "";
        o.jcdName = "";
        o.jcTime = "";
        o.updateTime = "";
        o.szjType = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        this.getDMJcEvent(o);
      } else if (val == "检测点") {
        o.kqName = "";
        o.jzId = "";
        o.jzName = "";
        o.jcdId = "";
        o.updateTime = "";
        o.jcdName = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        this.getDMkqJcdInfo(o);
      } else if (val == "注入事件") {
        o.kqName = "";
        o.jzId = "";
        o.jzState = "";
        o.jzName = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        this.getZrEventPage(o);
      }
    },
  },
  mounted() {
    let it = this;
    it.queryParam = it.$route.query.name;
    it.queryTab = it.$route.query.selTab;
    it.selTab = "检测事件";
    it.selKq = it.$route.query.selKq;
    it.showJz = it.$route.query.showJz;
    it.queryType = it.$route.query.queryTab;
    console.log("-----------====s")
    console.log(it.$route.query)
    if (it.showJz) {
      it.curJz = it.$route.query.curJz;
    }
    this.page = 0;
    let o = {};
    if (it.selTab == "注入点") {
      o.kqId = "";
      o.kqName = "";
      o.kqState = "";
      o.kqArea = "";
      o.startTime = "";
      o.page = this.page;
      o.pageSize = this.pageSize;
      it.getDMKqInfo(o);
    } else if (it.selTab == "检测事件") {
      o.jcEventId = "";
      o.kqName = "";
      o.jzId = "";
      o.jzName = "";
      o.jcType = "";
      o.jcdId = "";
      o.jcdName = "";
      o.jcTime = "";
      o.updateTime = "";
      o.szjType = "";
      o.page = this.page;
      o.pageSize = this.pageSize;
      it.getDMJcEvent(o);
    } else if (it.selTab == "检测点") {
      o.kqName = "";
      o.jzId = "";
      o.jzName = "";
      o.jcdId = "";
      o.updateTime = "";
      o.jcdName = "";
      o.page = this.page;
      o.pageSize = this.pageSize;
      it.getDMkqJcdInfo(o);
    } else if (it.selTab == "注入事件") {
      o.kqName = "";
      o.jzId = "";
      o.jzState = "";
      o.jzName = "";
      o.page = this.page;
      o.pageSize = this.pageSize;
      it.getZrEventPage(o);
    }
  },
  methods: {
    changePage(val) {
      this.page = val.page;
      val.pageSize = this.pageSize;
      let it = this;
      if (it.selTab == "注入点") {
        it.getDMKqInfo(val);
      } else if (it.selTab == "检测事件") {
        it.getDMJcEvent(val);
      } else if (it.selTab == "检测点") {
        it.getDMkqJcdInfo(val);
      } else if (it.selTab == "注入事件") {
        it.getZrEventPage(val);
      }
    },
    backPre() {
      let it = this
      this.showAll = false;
      let o = {};
      if (this.selTab == "注入点") {
        this.showKqInfo = true;
        o.kqId = "";
        o.kqName = "";
        o.kqState = "";
        o.kqArea = "";
        o.startTime = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        it.getDMKqInfo(o);
      } else if (this.selTab == "检测点") {
        this.showJcdInfo = true;
        o.kqName = "";
        o.jzId = "";
        o.jzName = "";
        o.jcdId = "";
        o.updateTime = "";
        o.jcdName = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        it.getDMkqJcdInfo(o);
      } else if (this.selTab == "检测事件") {
        this.showJcEvent = true;
        o.jcEventId = "";
        o.kqName = "";
        o.jzId = "";
        o.jzName = "";
        o.jcType = "";
        o.jcdId = "";
        o.jcdName = "";
        o.jcTime = "";
        o.updateTime = "";
        o.szjType = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        it.getDMJcEvent(o);
      } else if (this.selTab == "注入事件") {
        this.showZrEvent = true;
        o.kqName = "";
        o.jzId = "";
        o.jzState = "";
        o.jzName = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        this.getZrEventPage(o);
      }
    },
    changeKqInfo(val) {
      this.showKqInfo = val;
      this.showAll = true;
    },
    changeJcEventInfo(val) {
      this.showJcEvent = val;
      this.showAll = true;
    },
    changeJcdInfo(val) {
      this.showJcdInfo = val;
      this.showAll = true;
    },
    changeZrEvent(val) {
      this.showZrEvent = val;
      this.showAll = true;
    },
    togetDMKqInfo(val) {
      this.page = val.page;
      val.pageSize = this.pageSize;

      this.getDMKqInfo(val);
    },
    getDMKqInfo(val) {
      this.$axios.post(
        "/zrd/getZrdPage",
        val
      ).then((res) => {
        this.zrdList = res.data.zrdList;
        this.totalLen = res.data.len;
      });
    },
    togetDMJcEvent(val) {
      this.page = val.page;
      val.pageSize = this.pageSize;
      this.getDMJcEvent(val);
    },
    getDMJcEvent(val) {
      this.$axios({
        url: "/getDMkqJcdEventInfo",
        type: "post",
        params: val,
      }).then((res) => {
        this.jcEventList = res.data.jcEventList;
        this.totalLen = res.data.len;
      });
    },
    togetDMkqJcdInfo(val) {
      this.page = val.page;
      val.pageSize = this.pageSize;
      this.getDMkqJcdInfo(val);
    },
    getDMkqJcdInfo(val) {
      this.$axios({
        url: "/getDMkqJcdInfo",
        type: "post",
        params: val,
      }).then((res) => {
        this.jcdInfoList = res.data.jcdList;
        this.totalLen = res.data.len;
      });
    },
    togetDMkqJzInfo(val) {
      this.page = val.page;
      val.pageSize = this.pageSize;
      this.getZrEventPage(val);
    },
    getZrEventPage(val) {
      console.log("----------------val", val);
      this.$axios.post("/zrEvent/getZrEventPage", val).then((res) =>
      {
        console.log("res", res);
        this.zrEventList = res.data.zrEventList;
        this.totalLen = res.data.len;
      });
    },
  },
};
</script>
<style scoped>
.button-style {
  width: 142px;
  height: 37px;
  line-height: 37px;
  border-radius: 4px;
  background-color: #f1f1f1;
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 1);
}
.button-style:hover {
  cursor: pointer;
}
.date-style {
  color: black;
  font-size: 18px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin-left: 231px;
}
</style>